<template>
    <div class="Categories">
        <p class="p1">文章分类</p>

        <!-- 砍价管理主体 -->
        <div class="Categories_in">
            <p class="p2">
                <span class="s1">
                    是否显示：
                    <el-select size="small" @change="selsFun" v-model="value" placeholder="请选择">
                        <el-option
                        v-for="(v,i) in options"
                        :key="i"
                        :label="v.label"
                        :value="v.value">
                        </el-option>
                    </el-select>
                </span>
                <span class="s2">
                    <span>分类昵称：</span>
                    <el-input size="small" class="inps" v-model="input" placeholder="请输入分类昵称"></el-input>
                    <el-button size="small" type="primary" @click="inputFun" icon="el-icon-search"></el-button>
                </span>
            </p>

            <p class="p3">
                <el-button @click="addbookFun" size="small" type="primary" icon="el-icon-plus">添加文章分类</el-button>
            </p>

            <!-- 砍价商品表格 -->
            <el-table
                v-loading="loading"
                size='mini'
                :data="tableData"
                style="width: 100%">
                <el-table-column
                fixed
                prop="id"
                label="ID"
                width="120">
                </el-table-column>

                <el-table-column
                label="分类昵称"
                width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row.title }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                label="分类图片"
                width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" style="width:40px;height:44px;" alt="">
                    </template>
                </el-table-column>
                
                <el-table-column
                label="分类状态"
                width="160"
                fixed="right">

                    <template slot-scope="scope">
                        <el-tooltip :content="'ID value: ' + scope.row.id" placement="top">
                        <el-switch
                        v-model="scope.row.status"
                        :active-value='1'
                        :inactive-value='0'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="switchFun(scope.row)">
                        </el-switch>
                        </el-tooltip>
                    </template>

                </el-table-column>

                <el-table-column
                fixed="right"
                label="操作"
                width="166">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click='delshop(scope.row)'>删除</el-button>
                    <el-button type="text" @click="lookFun(scope.row)" size="small">查看文章</el-button>
                    
                </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </div>
    </div>
</template>

<script>
import {categorlist,categorswitch,categordel} from '../../api/content/Categories'
import moment from 'moment'

import qs from 'qs'
export default {
    components:{
        
    },
    data () {
        return {
            options: [
                {
                    "id":0,
                    'value':1,
                    'label':'显示'
                },
                {
                    "id":1,
                    'value':0,
                    'label':'隐藏'
                }
            ],
            value: '',
            input:'',
            tableData:[],
            page:1,
            limit:6,
            pid:0,
            total:0,
            loading:true,
        }
    },
    filters:{
    },
    methods:{
        //文章分类开关
        switchFun(val){
            //console.log(val.status);
            categorswitch({id:val.id,switchs:val.status}).then(res => {
                //console.log(res.data);
                if (res.data.status === 200) {
                    this.$message.success('状态修改成功')
                    this.joint();
                }else{
                    this.$message.error('状态修改失败')
                }
            },err => {
                console.log(err);
            })
        },
        //编辑
        handleClick(){

        },
        //删除
        delshop(val){
            this.$confirm('确定要删除文章分类吗? 删除文章分类后将无法恢复，请谨慎操作！', '删除文章分类', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            
                categordel(val.id).then(res => {
                    console.log(res.data);
                    if (res.data.status === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.joint();
                    }else{
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        //查看文章
        lookFun(val){
            //console.log(val);
            this.$router.push({path:'/writer',query:{
                pid:val.id
            }})
        },
        disVal(val){
            this.tables.dialogTableVisible = val
            this.loading = true;
            this.joint();
        },
        //文章名称查找
        inputFun(){
            //console.log(this.input);
            this.loading = true
            this.joint();
        },
        //下拉查找
        selsFun(){
            //console.log(this.value);
            this.loading = true
            this.joint();
        },
        //文章列表请求
        joint(){
            categorlist({page:this.page,limit:this.limit,type:0,status:this.value,title:this.input}).then(res => {
                console.log(res.data);
                if (res.data.status == 200) {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.count;
                    this.loading = false
                }
            },err => {
                console.log(err);
            })
        },
        handleCurrentChange(val) {
        this.page = val
        this.joint();
        },
        prevFun(val) {
            this.page = val
            this.joint();
        },
        nextFun(val) {
            this.page = val
            this.joint();
        },
    },
    created(){
        this.joint();
    }
}
</script>

<style lang="scss">
    .Categories{
        width: 100%;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .p1{
            width: 100%;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 18px;
        }
        .Categories_in{
            width: 100%;
            height: 500px;
            background: white;
            margin-top: 16px;
            .p2{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content:start;
                align-items: center;
                padding: 36px 20px;
                box-sizing: border-box;
            }
            .p3{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
            }
        }
    }

.Categories_in>.p2>span:nth-child(1){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
}
.Categories_in>.p2>span:nth-child(2){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
    .inps{
        width: 66%;
    }
    span{
        flex: 1;
        display: block;
        height: 100%;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
}
</style>